<template>
    <div>
        <!-- ref是盒子的名字 -->
        <div ref="tubiao2box" class="tubiao2"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.tubiao2 = echarts.init(this.$refs.tubiao2box);
        // 绘制图表
        this.tubiao2.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ]
        });
    },
}
</script>

<style lang="less" scoped>
.tubiao2 {
    width: 500px;
    height: 460px;
    margin-top: 10px;
}
</style>